<template>
  <div class="address-edit-box">
    <s-header :name="`${type == 'add' ? '新增地址' : '编辑地址'}`"></s-header>
    <van-address-edit
        class="edit"
        :area-list="areaList"
        :address-info="addressInfo"
        :show-delete="type === 'edit'"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
    />
  </div>
</template>

<script>
import {reactive, onMounted, toRefs} from 'vue'
import {Toast} from 'vant'
import sHeader from '@/components/SimpleHeader'
import {addAddress, EditAddress, DeleteAddress, getAddressDetail} from '@/service/user'
import {tdist} from '@/common/js/address'
import {useRoute, useRouter} from 'vue-router'

export default {
  components: {
    sHeader
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      areaList: {
        province_list: {},
        city_list: {},
        county_list: {}
      },
      searchResult: [],
      type: 'add',
      addressId: '',
      addressInfo: {},
      from: route.query.from
    })

    onMounted(async () => {
      // 省市区列表构造
      let _province_list = {}
      let _city_list = {}
      let _county_list = {}
      tdist.getLev1().forEach(p => {
        _province_list[p.id] = p.text
        tdist.getLev2(p.id).forEach(c => {
          _city_list[c.id] = c.text
          tdist.getLev3(c.id).forEach(q => _county_list[q.id] = q.text)
        })
      })
      state.areaList.province_list = _province_list
      state.areaList.city_list = _city_list
      state.areaList.county_list = _county_list

      const {addressId, type, from} = route.query
      state.addressId = addressId
      state.type = type
      state.from = from || ''

      if (type === 'edit') {
        const {data: addressDetail} = await getAddressDetail({"addressId": addressId})
        let _areaCode = ''
        const province = tdist.getLev1()
        Object.entries(state.areaList.county_list).forEach(([id, text]) => {
          // 先找出当前对应的区
          if (text === addressDetail.region) {
            // 找到区对应的几个省份
            const provinceIndex = province.findIndex(item => item.id.substr(0, 2) === id.substr(0, 2))
            // 找到区对应的几个市区
            // eslint-disable-next-line no-unused-vars
            const cityItem = Object.entries(state.areaList.city_list).filter(([cityId, cityName]) => cityId.substr(0, 4) == id.substr(0, 4))[0]
            // 对比找到的省份和接口返回的省份是否相等，因为有一些区会重名
            if (province[provinceIndex].text === addressDetail.province && cityItem[1] === addressDetail.city) {
              _areaCode = id
            }
          }
        })
        state.addressInfo = {
          id: addressDetail.addressId,
          name: addressDetail.name,
          tel: addressDetail.phone,
          province: addressDetail.province,
          city: addressDetail.city,
          county: addressDetail.region,
          addressDetail: addressDetail.detail,
          areaCode: _areaCode,
        }
      }
    })

    const onSave = async (content) => {
      const params = {
        name: content.name,
        phone: content.tel,
        province: content.province,
        city: content.city,
        region: content.county,
        detail: content.addressDetail
      }
      if (state.type === 'edit') {
        params['addressId'] = state.addressId
      }
      await state.type === 'add' ? addAddress(params) : EditAddress(params)
      Toast('保存成功')
      setTimeout(() => {
        router.back()
      }, 1000)
    }

    const onDelete = async () => {
      await DeleteAddress({"addressId": state.addressId})
      Toast('删除成功')
      setTimeout(() => {
        router.back()
      }, 1000)
    }

    return {
      ...toRefs(state),
      onSave,
      onDelete
    }
  }
}
</script>

<style lang="less">
@import '../../../common/style/mixin';

.edit {
  .van-field__body {
    textarea {
      height: 26px !important;
    }
  }
}

.address-edit-box {
  .van-address-edit {
    .van-button--danger {
      background: @primary;
      border-color: @primary;
    }

    .van-switch--on {
      background: @primary;
    }
  }
}
</style>
